<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3{
            margin-left: 200px;
        }
        table{
            /* 表格跟表格之间没有间隙 */
            border-collapse: collapse;
            width: 500px;
        }
        table tr td{
            border:1px solid gray;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>购物车</h3>
        <hr/>
        <table>
            <tr>
                <td>id序号</td>
                <td>名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>小计</td>
            </tr>

            <tr v-for="(item,index) in cartData" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button :disabled="item.num <= 1" @click="item.num--">-</button>
                    {{item.num}}
                    <button @click="item.num++">+</button>
                    <button @click="delFunc(index)">移除</button>
                </td>
                <td></td>
            </tr>
        </table>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                cartData:[{
                    id:1,
                    name:'小米手机',
                    price:100,
                    num:1,
                },{
                    id:2,
                    name:'华为手机',
                    price:200,
                    num:1,
                },{
                    id:3,
                    name:'联想手机',
                    price:100,
                    num:1,
                },{
                    id:4,
                    name:'苹果手机',
                    price:200,
                    num:1,
                }]
            },
            methods:{
                delFunc:function(index){
                    confirm("确认要删除么？") && this.cartData.splice(index, 1);
                    // 或是下面这种
                    // if(confirm("确认要删除么？")){
                    //     this.cartData.splice(index, 1);
                    // }
                }
            }
        })
    </script>
</body>
</html>